<template>
  <div class="itemList">
    <div class="item" v-for="(item, index) in itemList" :key="index">
      <em>{{ index + 1 }}</em>
      <p>
        <span>{{ item.item_mdd }}</span>
        <span>{{ item.item_dec }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "gl_gldh",
  data() {
    return {};
  },
  props: {
    itemList: {},
  },
  components: {},
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.itemList {
  padding: 8px;
  width: 350px;
  border: 1px solid #eee;
  background-color: #fff;
  display: none;
  .item {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    box-sizing: border-box;
    em {
      font-size: 20px;
      width: 30px;
      text-align: right;
      padding-right: 15px;
      font-family: Letter Gothic Std, Verdana, Geneva, sans-serif;
      font-weight: bold;
    }
    p {
      span {
        font-size: 12px;
        color: #666;
        padding-left: 12px;
        cursor: pointer;
        &:nth-child(1) {
          font-size: 14px;
        }
        &:hover {
          color: #ff9d00;
          text-decoration: underline;
        }
      }
    }
    &:last-child {
      padding: 0;
    }
    &:nth-child(-n + 3) {
      em,
      p span:nth-child(1) {
        color: #ff9d00;
      }
    }
  }
}
</style>